<template>
    <div v-if="$store.state.loading" class="loading-box-class">
        <div class="loader">
            <div class="loader-inner ball-spin-fade-loader">
              <div class="five"></div>
              <div class="two"></div>
              <div class="three"></div>
              <div class="four"></div>
              <div class="five"></div>
              <div class="two"></div>
              <div class="three"></div>
              <div class="four"></div>
            </div>
        </div>
    </div>
</template>
<script>
import "~/assets/inc/loaders.min.css";
export default {
    data(){
        return{
            loading: true,
        }
    },
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
}
</script>
<style lang="scss" scoped>
    .loading-box-class{
        inset: 0;
        width:100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background:rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        box-sizing: border-box;
        transition: 1s all ease;
        position: fixed;
        z-index: 99999;
    }

</style>
